Responsive Image Gallery

*{ box-sizing: border-box; margin: 0; } .header{ text-align: center; padding: 30px; font-size: 25px; } .row{ display: flex; flex-wrap: wrap; padding: 0 4px; } .column{ flex: 25%; max-width: 25%; padding: 0 4px; } .column img{ margin-top: 7px; vertical-align: middle; } @media (max-width:1000px){ .column{ flex: 50%; max-width: 100%; } } @media (max-width:600px){ .column{ flex: 100%; max-width: 100%; } }